<template>
  <div class="message-manage-page">
    <div class="breadcrumb">
      <Breadcrumb :data="breadcrumbData"></Breadcrumb>
    </div>
    <main>
      <div class="search-container">
        <div class="search-item">
          <div class="content">
            <el-input
              v-model="condition"
              placeholder="输入关键字搜索"
              @blur="handleSearch"
              @keydown.native.enter="handleSearch">
            </el-input>
          </div>
          <div class="label">类型：</div>
          <div class="content">
            <el-select v-model="msgType" @change="handleSearch">
              <el-option
                v-for="key in Object.keys(msgTypes)"
                :label="msgTypes[key]"
                :value="key"
                :key="key">
                {{ msgTypes[key] }}
              </el-option>
            </el-select>
          </div>
          <div class="label">状态：</div>
          <div v-show="status === '0'" class="content">
            <el-select v-model="readFlag" @change="handleSearch">
              <el-option label="未读" value="0">未读</el-option>
              <el-option label="已读" value="1">已读</el-option>
            </el-select>
          </div>
          <div v-show="status === '1'" class="content">
            <el-select v-model="dealStatus" @change="handleSearch">
              <el-option label="未处理" value="0">未处理</el-option>
              <el-option label="已处理" value="1">已处理</el-option>
            </el-select>
          </div>
          <el-button class="search-btn" type="primary" @click="handleSearch">
            <i class="el-icon-search"></i>
          </el-button>
          <el-button type="primary" @click="handleRefresh">
            <i class="el-icon-refresh"></i>
          </el-button>
        </div>
      </div>
      <el-tabs v-model="status" @tab-click="handleClick">
        <el-tab-pane label="消息" name="0">
          <el-table
            class="table-container"
            :data="tableData"
            v-loading="tableLoading"
            element-loading-custom-class="custom-load"
            row-key="id">
            <el-table-column label="序号" type="index" width="70" align="center"></el-table-column>
            <el-table-column label="消息名称" prop="planName" align="center"></el-table-column>
            <el-table-column label="消息类型" prop="msgType" align="center">
              <template slot-scope="scope">
                {{ msgTypes[scope.row.msgType] || '' }}
              </template>
            </el-table-column>
            <el-table-column label="状态" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.readFlag === '0' ? '未读' : '已读' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="创建人" prop="createUserName" align="center"></el-table-column>
            <el-table-column label="抄送人" prop="copyUserName" align="center"></el-table-column>
            <el-table-column label="更新时间" prop="modifyTime" align="center"></el-table-column>
            <el-table-column label="操作" width="180">
              <template slot-scope="scope">
                <span style="display: none;"></span>
                <span
                  v-if="hasTableDetail && !scope.row.hasRead"
                  class="btn"
                  @click="handleView(scope.row)">
                  已读
                </span>
              </template>
            </el-table-column>
            <div class="empty-content" slot="empty">
              <i class="iconfont iconwushuju"></i>
              <p>暂无数据</p>
            </div>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="待办" name="1">
          <el-table
            class="table-container"
            :data="tableData"
            v-loading="tableLoading"
            element-loading-custom-class="custom-load"
            row-key="id">
            <el-table-column label="序号" type="index" width="70" align="center"></el-table-column>
            <el-table-column label="消息名称" prop="msgName" align="center"></el-table-column>
            <el-table-column label="消息类型" prop="msgType" align="center">
              <template slot-scope="scope">
                {{ msgTypes[scope.row.msgType] || '' }}
              </template>
            </el-table-column>
            <el-table-column label="状态" align="center">
              <template slot-scope="scope">
                <span :class="scope.row.dealStatus === '0' ? 'untreated' : ''">
                  {{ scope.row.dealStatus === '0' ? '未处理' : '已处理' }}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="处理人" prop="dealUserName" align="center"></el-table-column>
            <el-table-column label="更新时间" prop="modifyTime" align="center"></el-table-column>
            <el-table-column label="操作" width="180">
              <template slot-scope="scope">
                <span style="display: none;"></span>
                <span
                  v-if="hasTableDetail && scope.row.dealStatus === '0'"
                  class="btn"
                  @click="routerLink(scope.row)">
                  处理
                </span>
                <span
                  v-if="hasTableDetail"
                  class="dar-btn"
                  @click="handleDelete(scope.row)">
                  删除
                </span>
              </template>
            </el-table-column>
            <div class="empty-content" slot="empty">
              <i class="iconfont iconwushuju"></i>
              <p>暂无数据</p>
            </div>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <el-pagination
        v-if="total > 10"
        :page-size="pageSize"
        :current-page="pageNo"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </main>
  </div>
</template>

<script>
import Breadcrumb from '@/components/public/Breadcrumb';

export default {
  data() {
    return {
      breadcrumbData: [
        { name: '消息管理' }
      ],
      status: '0',
      // 消息类型 1：材料管理 2:质安管理
      msgType: '1',
      // 0：未读；1：已读
      readFlag: '0',
      // 0：未处理；1：已处理
      dealStatus: '0',
      // 关键字
      condition: '',
      // 列表数据
      tableData: [],
      tableLoading: false,
      total: 0,
      pageSize: 10,
      pageNo: 1,
      hasSearch: false,
      msgTypes: {
        '1': '材料管理',
        '2': '质安管理'
      },
    };
  },
  computed: {
    projectId() {
      return this.$store.state.currentProjectId;
    },
    userInfo() {
      return this.$store.state.userInfo;
    }
  },
  created() {
    this.getData();
  },
  components: {
    Breadcrumb,
  },
  methods: {
    getData() {
      if (this.status === '0') {
        this.getTableData();
        return;
      }
      this.getAgencyMsgList();
    },
    /**
     * 获取列表数据
     */
    async getTableData() {
      const params = {
        pageNum: this.pageNo,
        pageSize: this.pageSize,
        projectId: this.projectId,
        copyUser: this.userInfo.uuid,
        msgType: this.msgType,
        readFlag: this.readFlag,
      };
      if (this.hasSearch) {
        params.condition = this.condition;
      }
      this.tableLoading = true;
      const { success, data: {
        data
      }} = await this.$Model.getMessageList(params);
      this.tableLoading = false;
      if (success && data) {
        const list = data.list || [];
        this.tableData = list.map(item => {
          const { readFlag } = item;
          return {
            ...item,
            hasRead: readFlag === '1'
          };
        });
        this.total = data.total || 0;
      }
    },
    /**
     * 获取列表数据
     */
    async getAgencyMsgList() {
      const params = {
        pageNum: this.pageNo,
        pageSize: this.pageSize,
        dealUser: this.userInfo.uuid,
        msgType: this.msgType,
        dealStatus: this.dealStatus,
      };
      if (this.hasSearch) {
        params.condition = this.condition;
      }
      this.tableLoading = true;
      const { success, data: {
        data
      }} = await this.$Model.getAgencyMsgList(params);
      this.tableLoading = false;
      if (success && data) {
        this.tableData = data.list || [];
        this.total = data.total || 0;
      }
    },
    handleClick(e) {
      this.status = e.name;
      this.handleSearch();
    },
    /**
     * pageSize 改变时会触发
     * @param pageSize 每页条数
     */
    handleSizeChange(pageSize) {
      this.pageNo = 1;
      this.pageSize = pageSize;
      this.getData();
    },
    /**
     * currentPage 改变时会触发
     * @param pageNo 当前页
     */
    handleCurrentChange(pageNo) {
      this.pageNo = pageNo;
      this.getData();
    },
    // 清除参数
    clear() {
      this.pageNo = 1;
      this.pageSize = 10;
      this.total = 0;
      this.tableLoading = false;
      this.tableData = [];
    },
    // 搜索
    handleSearch() {
      this.clear();
      this.hasSearch = !!this.condition;
      this.getData();
    },
    handleRefresh() {
      this.condition = '';
      this.searchDate = '';
      this.msgType = '1';
      this.readFlag = '0';
      this.dealStatus = '0';
      this.clear();
      this.getData();
    },
    // 已读
    async handleView(row) {
      const { success } = await this.$Model.messageRead({
        ids: row.id
      });
      success && this.getData();
    },
    // 处理待办
    routerLink(row) {
      const { relationDetail: { status, type, id } = {}} = row;
      let routerStr = '';
      if (this.msgType === '1') {
        routerStr = '/material/investment';
      } else {
        // type: 1：质量；2：安全,
        // status:0：未初审；1：未整改；2：未复核；3：已复核；4：初审失败,
        const preStr = type === '1' ? 'quality' : 'security';
        routerStr = `/${preStr}/inspection`;
      }
      this.$router.push(routerStr);
    },
    // 删除
    handleDelete(row) {
      this.$confirm('此操作将删除该消息, 是否继续?', '提示', {
        type: 'warning'
      }).then(async () => {
        const { success } = await this.$Model.delAgencyMsg({
          ids: row.id
        });
        if (success) {
          this.$message.success('删除成功');
          this.tableData.length <= 1 && this.clear();
          this.getData();
        }
      });
    },
  }
};
</script>

<style scoped lang="scss">
  @import '../../../assets/styles/table';

  .message-manage-page {
    width: 100%;
    height: 100%;
    background-color: $mainBg;
    overflow: hidden;
    main {
      width: 100%;
      height: calc(100% - 50px);
      padding: 20px;
      .search-container {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
        .search-item {
          display: flex;
          align-items: center;
          .el-input {
            width: 300px;
            margin-right: 20px;
          }
        }
        .search-btn {
          margin-left: 20px;
        }
      }
      .el-tabs {
        width: 100%;
        height: calc(100% - 100px);
        /deep/ .el-tabs__active-bar {
          background-color: $mainColor;
        }
      }
      /deep/ .el-tabs__content {
        height: calc(100% - 80px);
        .el-tab-pane {
          height: 100%;
        }
      }
      /deep/ .el-tabs__item {
        color: #fff;
        &.is-active {
          color: $mainColor;
        }
        &:focus.is-active.is-focus:not(:active) {
          box-shadow: 0 0 2px 2px $mainColor inset;
          border-radius: 3px
        }
      }
      .table-container {
        height: 100%;
        /deep/ .el-table__body-wrapper {
          height: calc(100% - 50px);
          padding-bottom: 46px;
          overflow-y: auto;
          .btn {
            padding: 0 5px;
            cursor: pointer;
            color: $mainColor;
          }
          .untreated {
            color: $dangerBtn;
          }
          .img {
            width: 60px;
            height: 60px;
          }
          .file-name {
            height: 60px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
          }
        }
        /deep/ .el-table__header {
          th.is-leaf .el-button span {
            color: #fff;
          }
        }
      }

    }
  }
</style>
